<template>
	<view class="address-page">
		<hs-status-bar type="capsule"></hs-status-bar>
		<top-bar :title="'选择收货地址'" direction="left" :haveBack="true"></top-bar>
		<scroll-view scroll-y="true" class="address-box">
			<view v-for="item of addressList" :key="item.id" @click.stop="chooseAdress(item)" class="address-item">
				<view class="">
					{{ `${item.province}   ${item.city}`}}
				</view>
				<view class="">
					{{item.addressLine}}
				</view>
				<view class="">
					{{ `${item.receiverName}   ${item.receiverPhone}`}}
					<text class="default" v-show="item.defaultAddress">默认</text>
				</view>
				<image src="@/static/images/icon/edit1.png" mode="aspectFit" class="edit"
					@click.stop="editAdress(item)">
				</image>
			</view>
			<u-empty v-if="!addressList.length" mode="message" text="暂无收货地址"
				 icon="/static/images/icon/address.jpg">
			</u-empty>
		</scroll-view>
		<view class="under-btn">
			<!-- <view class="manage">
				管理
			</view> -->
			<view class="add" @click="editAdress">
				添加收货地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				topBarHeight: uni.getStorageSync('topbarHeight'),
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
			}
		},
		computed: {
			...mapGetters(['addressList'])
		},
		methods: {
			...mapActions(['getAddressList']),
			chooseAdress(data) {
				uni.setStorageSync('orderAdress', data)
				uni.navigateBack()
			},
			// 跳转修改地址页
			editAdress(data) {
				if (data && data.id) {
					uni.setStorageSync('editAddress', data)
				} else {
					uni.removeStorageSync('editAddress')
				}
				uni.navigateTo({
					url: '/pages/order/adressEdit?intoType=1'
				})
			}
		},
		onShow() {
			this.getAddressList()
		}
	}
</script>

<style lang="scss">
	.address-page {
		display: flex;
		flex-direction: column;
		height: 100%;

		.address-box {
			margin-top: 9rpx;
			background: #fff;
			flex-grow: 1;
			overflow: hidden;

			.address-item {
				height: 221rpx;
				width: 100%;
				padding: 48rpx 122rpx 0rpx 30rpx;
				border-bottom: 1rpx solid #D9D9D9;
				position: relative;

				view:nth-child(1) {
					font-size: 26rpx;
					margin-bottom: 15rpx;
					color: #979797;
				}

				view:nth-child(2) {
					font-size: 35rpx;
					margin-bottom: 25rpx;
					font-weight: bold;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				view:nth-child(3) {
					font-size: 31rpx;
					color: #3D3D3D;
				}

				.default {
					margin-left: 35rpx;
					background: #33333318;
					color: #333;
					line-height: 37rpx;
					text-align: center;
					font-size: 26rpx;
					padding: 5rpx 11rpx;
				}

				.edit {
					height:100%;
					width: 53rpx;
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					padding-right: 27rpx;
				}

				&:nth-child(1) {
					height: 194rpx;
					background: #EFEFEF;
					width: 100%;
					margin-left: 0;
					padding: 20rpx 122rpx 0rpx 30rpx;
				}

			}
		}

		.under-btn {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			margin: 10rpx 0;

			.manage,
			.add {
				height: 75rpx;
				background: #333;
				color: #fff;
				border-radius: 17rpx;
				text-align: center;
				line-height: 75rpx;
				padding: 0 21rpx;
				flex: 1;
				margin: 0 30rpx;
			}
		}
	}
</style>